<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义过滤器的使用</title>
    <link rel="stylesheet" href="./libs/css/bootstrap.css">
</head>
<body ng-app='app'>
       <div class="container" ng-controller="demoCtrl">
            <div class="panel panel-primary">
                <div class="panel-heading">
                        自定义反转字符串过滤器
                </div>
                <div class="panel-body">
                    <input type="text" ng-model='content' class="form-control" ng-keyup="updateContent2()">
                    <div class="well well-sm">
                        标签中调用自定义过滤器(反转+大写)：{{content|reverse:true}}
                    </div>
                    <div class="well well-sm">
                        直接在控制其中调用自定义过滤器(反转)：{{content2}}
                    </div>
                </div>
            </div>
       </div> 
</body>
<script src="./libs/js/angular-1.6.9.min.js"></script>
<!-- <script src="./libs/js/angular-1.2.30.js"></script>  -->
<script>
    var app=angular.module('app',[]);
    //自定义反转字符串的过滤器
    app.filter('reverse',function(){
        return function(input,flag=false){
            var output;
            if(flag){
                output=input.split('').reverse().join('').toUpperCase();
            }else{
                output=input.split('').reverse().join('');
            }
            return output;
        }
    });
    //注意：在控制器中注入自定义过滤器的时候要在过滤器的名称后加上Filter的后缀
    app.controller('demoCtrl',['$scope','$timeout','reverseFilter',function($scope,$timeout,reverseFilter){
        $scope.content='abcdef';
        $scope.content2=reverseFilter($scope.content);
        
        $scope.updateContent2=function(){
            $scope.content2=reverseFilter($scope.content);
        }
    }]);
    
</script>
</html>